<template>
	<view class="pb200">
		<view class="posifi width1000 bgfff height100 top0 flex-ju-b zindex3" :style="{paddingTop:shh+'px'}">
			<view class="flex-a-i ml15">
				<uni-icons @click="back" type="back" color="#333333" size="25"></uni-icons>
				<view class="flex-a-i ml5">
					<image class="wh70-70 ra70 image mr10" :src="user.avatar?user.avatar:'/static/mo.png'"></image>
					<view>
						<view class="color27A752 size29 bold">{{user.nickname}}</view>
						<view class="color999 size22 mt5">{{info.address}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="posire " :style="{marginTop:50+shh+'px'}">
			<view class="posiab right30 wh50-50 ra50 top30 size22 flex-ju-c colorfff" style="background: rgba(0, 0, 0, 0.6);">
				{{tindex+1}}/{{info.imgs.length}}
			</view>
			<swiper @change="swchang"  class="swiper height800" circular >
				<swiper-item v-for="(item,g) in info.imgs" :key="g">
					<view class="swiper-item uni-bg-red">
						<view v-if="item.endsWith('.mp4')" class="posire">
							<view class="posiab width1000 height800 "></view>
							<video  mode="widthFix" class="image height800" :src="item"></video>
						</view>
						<image v-else mode="widthFix" class="image" :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="flex-ju-c mt10">
				<view class="flex-a-i">
					<view v-for="(item,h) in info.imgs" :key="h" :class="{active:tindex == h}" class="wh10-10 bgccc  ml5 mr5 ra10"></view>
				</view>
			</view>
		</view>
	
		<view class="con">
			<view class="size35 color333 bold mt30">
				{{info.title}}
			</view>
			<view class="line20 size26 mt30">
				{{info.content}}
			</view>
		</view>
		
		<view class="posifi width1000 bottom safe-area-inset-bottom bgfff border-tEDEDED pt20 pb30">
			<view @click="fabu" class="ibgto-27A752-C6FF00 con width1000 flex-ju-c height100 size30 bold ra100">
				发布笔记
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tindex:0,
				user:uni.getStorageSync('user'),
				info:{}
			}
		},
		onLoad(option) {
			this.info = JSON.parse(option.info)
		},
		methods: {
			getimgpath() {
				uni.showLoading({
					title: "正在保存"
				})
				return new Promise((resolve, reject) => {
					var ff = []
					for (let i = 0; i < this.imgs.length; i++) {
						uni.downloadFile({
							url: this.imgs[i],
							success: (res) => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: res => {
											ff.push(res.path)
											if (ff.length == this.imgs.length) {
												resolve()
											}
										},
										fail: (res) => {
											uni.showModal({
												content: JSON.stringify(res),
												showCancel: false
											})
										}
									})
								}
							}
						})
					}
				})
			},
			swchang(e){
				this.tindex = e.detail.current
			},
			fabu() {
				if (this.info.imgs.length < 1) {
					uni.showToast({
						title: "上传图片",
						icon: "none"
					})
					return
				}
				if (!this.info.title.trim()) {
					uni.showToast({
						title: "输入标题",
						icon: "none"
					})
					return
				}
				if (!this.info.content.trim()) {
					uni.showToast({
						title: "输入正文",
						icon: "none"
					})
					return
				}
			
				if (this.info.photo) {
					this.getimgpath().then(res => {
						uni.hideLoading()
						this.infid()
					})
				} else {
					this.infid()
				}
				
			},
			infid() {
				var aobj = {path:'',origin_path:''}
				var arrobj = []
				this.info.imgs.map(item=>{
					aobj.path = item
					arrobj.push(aobj)
				})
				
				this.http('/api/user/data', {
					title: this.info.title,
					content: this.info.content,
					imgs: arrobj,
					address: this.info.address,
					power: this.info.power,
					no_uids:this.info.no_uids
				}, 'post').then(res => {
					uni.showToast({
						title:"发布成功",
						icon:"none"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/user/index"
						})
					},500)
					
				})
			},
		}
	}
</script>

<style>
.active{
		background: #27A752;
		width: 21rpx;
		border-radius: 5rpx;
	}
</style>
